<template>
<router-view v-slot="{ Component }">
   <keep-alive :include="['movie', 'shop']">
     <component :is="Component" />
   </keep-alive>
</router-view>

<a href="http://8.140.30.49" target="_blank" class="floatingBall">PC简历观赏</a>
  <!-- <router-view v-slot="{ Component }">
    <keep-alive :include="['movie', 'shop']">
      <component :is="Component" :key="Component"></component>
    </keep-alive>
  </router-view> -->
  <!-- <router-view>
  </router-view> -->
  <van-tabbar route>
    <van-tabbar-item replace icon="home-o" to="/movie">视频</van-tabbar-item>
    <van-tabbar-item replace icon="shop-o" to="/shop">商城</van-tabbar-item>
    <van-tabbar-item replace icon="user-o" to="/user">我的</van-tabbar-item>

  </van-tabbar>
</template>
<script>
	export default {
		name: 'Main',
		data() {
			return {
				iSpeedX: 6,
				iSpeedY: 8,
				timer: null
			}
		},
		methods: {
			startMove: function() {
				var _this = this;
				clearInterval(_this.timer)
				_this.timer = setInterval(function() {
					var oDiv = document.querySelector(".floatingBall");
					var l = oDiv.offsetLeft + _this.iSpeedX;
					var t = oDiv.offsetTop + _this.iSpeedY;
					var oDivoffT = document.documentElement.clientHeight - oDiv.offsetHeight;
					var oDivoffl = document.documentElement.clientWidth - oDiv.offsetWidth;

					if(t >= oDivoffT) {
						_this.iSpeedY *= -1;
						t = oDivoffT;
					} else if(t < 0) {
						_this.iSpeedY *= -1;
						t = 0;
					}

					if(l >= oDivoffl) {
						_this.iSpeedX *= -1;
						l = oDivoffl;
					} else if(l <= 0) {
						_this.iSpeedX *= -1;
						l = 0;
					}
					oDiv.style.left = l + 'px';
					oDiv.style.top = t + 'px';

				},100)
			}

		},
		mounted: function() {
			this.startMove()
		},
		beforeUnmount() {
			clearInterval(this.timer);
			this.timer = null;
		}

	}
</script>
<style lang="less">
  .floatingBall{
    width: 2rem;
    height: 2rem;
    top: 50%;
    // margin-top: -1rem;
    left: 0;
    // bottom: 0;
    font-size: 0.4rem;
    line-height: 0.5rem;
    padding: 0.2rem;
    display:flex;
    text-align: center;
    flex-direction: row;
    align-items:center;
    justify-content:center;
    box-sizing: border-box;
    position: fixed;
    z-index: 123;
    background:rgba(0,0,0,0.6);
    color: #fff;
    border-radius: 2rem;
  }
</style>